<template>
	<view>
		<view class="header">
			<text class="num">累计评价{{num}}条</text>
		</view>
		<view class="main">
			<view class="commentlist" v-for="(item,index) in commentlistData" :key="index">
			<view class="headBox">
				<image class="photo" :src="item.member_avatar"></image>
				<text class="name">{{item.member_name}}</text>
			</view>
			<view class="content">
				{{item.comment_content}}
			</view>
			<view class="fotter">
				<text class="particularYear">{{item.create_time}}</text>
				<view class="plBox">
					<image @click="goReply(index)" class="infoimg" src="../../../static/prodtct/kefu.png" mode=""></image>
					<text class="plnum">{{item.replynum}}</text>
				</view>
			</view>
		</view>
		</view>
		
	</view>
</template>

<script>
	import Require from '../../../common/require.js';
	export default {
		data() {
			return {
				num:'',
				id:'',
				commentlistData:[]
			};
		},
		onLoad(option) {
			var self=this
			self.id=option.id
			console.log(option.id)
		},
		onShow() {
			this.allcomments();
		},
		methods:{
			allcomments(){
				var self=this
				Require.commonRequest({
					url:'/api/forum/commentlist',
					data:{
						forum_id:self.id,
						page:10,
						pagesize:10,
					},
					method:'POST',
					success: function(ret) {
						  if(ret.data.code==200){
							  self.commentlistData=ret.data.data.commentlist
							  self.num=ret.data.data.commentlist.length
							  }
						},
						fail: function() {
							uni.showToast({
								icon: "none",
								title: "网络异常，请稍后再试"
							})
						}
					})
				},
				goReply(e){
					uni.navigateTo({
						url:'./replytoComments?id='+this.commentlistData[e].commentid+'&&photo='+this.commentlistData[e].member_avatar+'&&name='+this.commentlistData[e].member_name+'&&year='+this.commentlistData[e].create_time+'&&content='+this.commentlistData[e].comment_content
					})
					}
			}
	}
</script>

<style lang="scss">
   page{
	   background-color: #F1F1F1;
	   
   }
   .header{
	   width: 750rpx;
	   height: 60rpx;
	   background-color: #FFFFFF;
	   display: flex;
	   justify-content: center;
   }
   .num{
	   font-size:28rpx;
	   font-family:PingFang SC;
	   font-weight:400;
	   color:rgba(142,142,142,1);
	   }
	   .main{
		   width: 750rpx;
		   margin-top: 30rpx;
	   }
	   .commentlist{
		   width:690rpx;
		   height:300rpx;
		   background:rgba(255,255,255,1);
		   border-radius:20rpx;
		   margin-left: 30rpx;
		   margin-bottom: 30rpx;
	   }
	   .headBox{
		    width: 690rpx;
			height: 120rpx;
			
			display: flex;
			align-items: center;
	   }
	   .photo{
		   width:64rpx;
		   height:64rpx;
		   border-radius:50%;
		   margin-left: 30rpx;
	   }
	   .name{
		   font-size:28rpx;
		   font-family:PingFang SC;
		   font-weight:bold;
		   color:rgba(46,46,46,1);
		   margin-left: 22rpx;
	   }
	   .content{
		   width:628rpx;
		   height:115rpx;
		   font-size:30rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(68,68,68,1);
		   line-height:38rpx;
		   margin-left: 30rpx;
		   display: -webkit-box;
		   -webkit-box-orient: vertical;
		   -webkit-line-clamp: 3;
		   overflow: hidden;
		   }
		   .fotter{
			   width: 690rpx;
			   height: 56rpx;
			   display: flex;
			   align-items: center;
			   position: relative;
		   }
		   .particularYear{
			   font-size:28rpx;
			   font-family:PingFang SC;
			   font-weight:400;
			   color:rgba(142,142,142,1);
			   margin-left: 30rpx;
		   }
		   .plBox{
			   position: absolute;
			   right: 30rpx;
		   }
		   .infoimg{
			   width: 26rpx;
			   height: 26rpx;
		   }
		   .plnum{
			   font-size:26rpx;
			   font-family:PingFang SC;
			   font-weight:400;
			   color:rgba(142,142,142,1);
			   margin-left: 12rpx;
		   }
</style>
